<!-- 回单类型组件 -->
<template>
  <nut-popup class="billServerBox" position="bottom" closeable round :style="{ height: '50%' }" @click-close-icon="sendBillServerMsg(0)" v-model:visible="props.showRound">
    <nut-cell title="回单类型"></nut-cell>
    <nut-checkbox-group v-model="checkboxgroup"  :max="2">
      <nut-cell> <nut-checkbox label="1"> 附单据，资料 </nut-checkbox></nut-cell>
      <nut-cell> <nut-checkbox label="2"> 承运单 </nut-checkbox></nut-cell>
      <nut-cell> <nut-checkbox label="3"> 附厂单，资料 </nut-checkbox></nut-cell>
    </nut-checkbox-group>
    <nut-cell class="inputBox flex-ld">
      <span>签</span>
      <nut-input class="input" placeholder="" v-model="billNumCopy" />
      <span>联</span>
    </nut-cell>

    <nut-button class="btn" block type="primary" color="#0966ff" @click="sendBillServerMsg(1)">确定</nut-button>
  </nut-popup>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import Taro from '@tarojs/taro'

const props = defineProps<{
  showRound: boolean
  billNum: string
}>()

const emit = defineEmits(['sendBillServerMsg'])

watch(
  () => props.billNum,
  (newVal) => {
    console.log(newVal, '监听联数')
    if (Number(newVal)) {
      billNumCopy.value = newVal
    }
  }
)


const billNumCopy = ref('')
const checkboxgroup = ref() // 选中的回单类型

const sendBillServerMsg = (flag) => {
  if (flag) {
    const sendData = {
      billServer: 0,
      billNum: 1
    }
    emit('sendBillServerMsg', sendData) // 关闭弹窗传递数据
  } else {
    emit('sendBillServerMsg', null) // 关闭弹窗不传递数据
  }
}
</script>

<style lang="scss">
.billServerBox {
  .inputBox {
    font-size: 28rpx;
    color: #666;
    .input {
      background: #f5f5f5;
    }
  }
  .nut-tabs.vertical .nut-tabs__titles-item.active .nut-tabs__titles-item__line {
    left: 0rpx;
    width: 6rpx;
    background: #0966ff;
  }

  .nut-cell {
    margin: 0;
  }

  .nut-tab-pane {
    padding: 0;
  }

  .nut-radio-group {
    display: block;
  }

  .flex_ld {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .btn_box {
    .button {
      width: 218rpx;
      height: 72rpx;
      border-radius: 88rpx;
    }
  }

  .nut-radio__button {
    width: 210rpx;
    height: 72rpx;
    border-radius: 88rpx;
    justify-content: center;
  }

  .nut-radio__button--active {
    color: #0966ff;
    font-weight: bold;
  }

  .nut-radio__button--active {
    color: var(--nut-radio-label-font-active-color, var(--nut-primary-color, #0966ff));
    border: 2rpx solid var(--nut-radio-label-button-border-color, var(--nut-primary-color, #0966ff));
  }

  .nut-radio__button--active::after {
    border-radius: 88rpx;
    background-color: var(--nut-radio-label-button-background, var(--nut-primary-color, #0966ff));
  }
}
</style>
